<!--
 * @Author: your name
 * @Date: 2021-01-10 12:53:14
 * @LastEditTime: 2021-01-11 19:22:16
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \shopping\src\pages\category\main.vue
-->
<template>
  <view>
    <!-- 搜索框 -->
    <Search />
    <!-- 主体内容 -->
    <view class="main">
      <scroll-view class="left" scroll-y="true">
        <!-- class="cate_item {{activeValue==index?'active':''}}" -->
        <!-- bindtap="activeCategory" -->

        <view
          class="cate_item"
          v-for="(item, index) in leftCate"
          :key="item.cat_id"
          @tap="changeTabs(index)"
          :class="{ active: index === activeIndex }"
        >
          {{ item.cat_name }}
        </view>
      </scroll-view>

      <scroll-view class="right" scroll-y="true">
        <!-- v-if="item.children" -->

        <view class="main_cate" v-for="item in rightCate" :key="item.cat_id">
          <view class="title" v-if="item.children.length > 0">
            <text>{{ item.cat_name }} </text>
          </view>
          <view class="category_list">
            <navigator
              hover-class="none"
              :url="'/pages/goods_list/main?cid=' + cate.cat_id"
              class="category_item"
              v-for="cate in item.children"
              :key="cate.cat_id"
            >
              <image :src="cate.cat_icon" lazy-load="true" />
              <text user-select>{{ cate.cat_name }}</text>
            </navigator>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
import { getCategoryList } from "@/api/index.js";

export default {
  data() {
    return {
      leftCate: [],
      rightCate: [],
      activeIndex: 0,
      cateAll: [],
      validTime: 1800,
    };
  },
  onLoad() {
    const cateAll = uni.getStorageSync("cateAll") || [];
    if (cateAll.length > 0) {
      const now = Date.now();
      const old = uni.getStorageSync("validTime");
      if ((now - old) / 1000 >= this.validTime) {
        this.getCategoryList();
      } else {
        this.initData(cateAll);
      }
      this.cateAll = cateAll;
    } else {
      this.getCategoryList();
    }
  },
  onShow() {},
  methods: {
    async getCategoryList() {
      const res = await getCategoryList();
      //   保存所有的数据
      const cateAll = res.data.message;
      uni.setStorageSync("cateAll", cateAll);
      uni.setStorageSync("validTime", Date.now());

      this.initData(cateAll);
    },
    initData(cateAll) {
      this.cateAll = cateAll;

      // 精简左边商品分类列表 拿出需要的数据
      this.leftCate = cateAll.map(({ cat_id, cat_name }) => ({
        cat_id,
        cat_name,
      }));
      this.rightCate = cateAll[0].children;
    },
    changeTabs(index) {
      this.activeIndex = index;
      this.rightCate = this.cateAll[this.activeIndex].children;
    },
  },
};
</script>

<style lang="less" scoped>
.main {
  display: flex;
}
.main .left {
  width: 182rpx;
  height: calc(100vh - 100rpx);
  background-color: #f2f2f2;
}

.main .left .cate_item {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 17rpx 0;
  color: #585858;
  font-size: 28rpx;
}

.main .left .cate_item.active {
  color: #ea4350;
}
.main .left .cate_item.active::before {
  content: "";
  position: absolute;
  left: 0;
  height: 32rpx;
  border-left: 3rpx solid #ea4350;
}
.main .right {
  flex: 1;
  height: calc(100vh - 100rpx);
}
.main .right .main_cate {
  border-radius: 10rpx;
  box-shadow: 1px 1px 7px 1px #ccc;
  margin: 20rpx 40rpx;
}

.main .right .main_cate .title {
  display: flex;
  font-size: 26rpx;
  font-weight: 700;
  color: #575757;
  padding: 20rpx;
}
.main .right .main_cate .category_list {
  display: flex;
  flex-wrap: wrap;
  padding: 0 20rpx;
}

.main .right .main_cate .category_list .category_item {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: 40rpx;
  margin-bottom: 30rpx;
  font-size: 21rpx;
}
.main .right .main_cate .category_item:nth-child(3n) {
  margin-right: 0;
}
.main .right .main_cate .category_item image {
  width: 120rpx;
  height: 120rpx;
}
</style>